<template>
  <div style="position:relative;">
    <div class="tuding">
      <img src="../../assets/image/tuding.png" alt="" />
    </div>
    <!-- 面包屑区域 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">用户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片组件 -->
    <el-card class="box-card">
      <!-- 搜索部分 -->
      <el-row :gutter="20" style="margin-top:20px;">
        <el-col :span="8" style="margin-left:20px;">
          <el-input
            placeholder="请输入用户名"
            v-model="query"
            clearable
            @clear="getUserlist()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUserlist()"
            ></el-button> </el-input
        ></el-col>
        <el-col :span="5">
          <el-button type="primary " @click="adduservisible = true"
            >添加管理员</el-button
          >
        </el-col>
      </el-row>
      <div class="biaobailogo">
        <img src="http://localhost:8090/admin.png" alt="" />
      </div>
      <!-- 用户表格 -->
      <el-table :data="Userdata" border style="width: 100%" stripe>
        <el-table-column label="序号" width="50px" type="index">
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="180">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="180">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="userstatechanged(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-tooltip
              effect="light"
              content="编辑角色"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="
                  edituser(
                    scope.row.id,
                    scope.row.name,
                    scope.row.email,
                    scope.row.phone
                  )
                "
              ></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip
              effect="light"
              content="删除角色"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteuser(scope.row.id)"
              ></el-button>
            </el-tooltip>
            <!-- 分配权限按钮 -->
            <el-tooltip
              effect="light"
              content="权限分配"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加用户弹出的对话框 -->
    <el-dialog
      title="增加管理员"
      :visible.sync="adduservisible"
      width="40%"
      :before-close="handleClose"
      @close="resetform"
    >
      <!-- 内容主题区域 -->
      <el-form
        :model="addForm"
        :rules="addFormrules"
        ref="addFormRef"
        width="500px"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <!-- 结束内容主题区 -->
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="adduservisible = false">取 消</el-button>
        <el-button type="primary" @click="adduser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 结束添加用户弹出的对话框 -->
    <!-- 修改用户的对话框 -->
    <el-dialog
      title="修改用户"
      :visible.sync="edituservisible"
      width="40%"
      @close="resetform"
    >
      <!-- 内容主题区域 -->
      <el-form
        :model="editform"
        :rules="editformrule"
        ref="editFormRef"
        width="500px"
        label-width="100px"
      >
        <el-form-item label="用户名">
          <el-input v-model="editform.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editform.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editform.phone"></el-input>
        </el-form-item>
      </el-form>
      <!-- 结束内容主题区 -->
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="edituservisible = false">取 消</el-button>
        <el-button type="primary" @click="edituserover">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      Userdata: [
        {
          name: "",
          email: "",
          phone: "",
          role: "",
          status: "",
        },
      ],
      // 每页显示多少条
      pagesize: "2",
      // 当前页数
      pagenum: "1",
      total: "",
      query: "",
      // 是否可见对话框
      adduservisible: false,
      // 添加用户区域
      addForm: {
        name: "",
        password: "",
        email: "",
        phone: "",
      },
      addFormrules: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "用户名长度应为2-10个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 15,
            message: "密码长度应为6-15个字符",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话",
            trigger: "blur",
          },
        ],
      },
      // 修改用户区域
      edituservisible: false,
      editform: {
        id: "",
        name: "",
        email: "",
        phone: "",
      },
      editformrule: {
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getUserlist();
  },
  methods: {
    getUserlist() {
      this.$http
        .post("user", {
          name: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        })
        .then((res) => {
          this.Userdata = res.data.userList;
          this.total = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(newsize) {
      this.pagesize = newsize;
      this.getUserlist();
    },
    handleCurrentChange(newpage) {
      this.pagenum = newpage;
      this.getUserlist();
    },
    // 修改用户状态
    userstatechanged(userinfo) {
      this.$http
        .post("state", {
          status: userinfo.status,
          id: userinfo.id,
        })
        .then((res) => {
          this.$message.success("用户状态修改成功");
        });
    },
    // 重置添加用户验证
    resetform() {
      this.$refs.addFormRef.resetFields();
      this.$refs.editFormRef.resetFields();
    },
    // 增加用户
    adduser() {
      this.$refs.addFormRef.validate((vaild) => {
        if (!vaild) return this.$message.error("添加用户失败");
        this.$http.post("/adduser", this.addForm).then((res) => {
          this.getUserlist();
          this.$message.success("添加成功");
          this.adduservisible = false;
        });
      });
    },
    // 修改用户显示对话框
    edituser(id, name, email, phone) {
      this.edituservisible = true;
      this.editform.id = id;
      this.editform.name = name;
      this.editform.email = email;
      this.editform.phone = phone;
    },
    // 修改用户完成 发送请求
    edituserover() {
      this.$refs.editFormRef.validate((vaild) => {
        if (!vaild) {
          return this.$message.error("修改失败");
        }
        this.$http.post("edituser", this.editform).then((res) => {
          if (res.data !== 200) {
            return this.$message.error("编辑用户失败");
          }
          this.$message.success("修改成功");
          this.edituservisible = false;
          this.getUserlist();
        });
      });
    },
    // 删除用户
    deleteuser(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("deleteuser", {
              id: id,
            })
            .then((res) => {
              this.getUserlist();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.biaobailogo {
  position: absolute;
  right: 10px;
  /* width: 100px; */
  top: 10px;
}
.biaobailogo img {
  width: 220px;
}
.box-card {
  position: relative;
  /* width: 90%; */
}
.tuding {
  position: absolute;
  left: -15px;
  top: 10px;
  z-index: 10;
}
</style>
